<!--
    已激活案件列表 弹窗 公共插件

    参数：
    modal       弹窗开关
    modalTitle  弹窗title

    dataDict    数据字典

    方法:

    closeModal          关闭弹窗
 -->
<template>
    <Modal
        :title="modalTitle"
        v-model="ModalOpen"
        :width="950"
        @on-cancel="cancel"
    >
        <div class="addContract">
            <template>
                <Table :columns="columns1" :data="formValidate"></Table>
            </template>
        </div>
        <div slot="footer"></div>
    </Modal>
</template>

<script>
    import {
        interestByContract
    } from "@/projects/basic/api/contract/cost-exempt-bill/index";
    export default {
        // 已激活案件列表 弹窗
        name: "everyInterestDetail",
        components: {},
        props: {
            isModalOpen: {
                type: Boolean,
                required: true
            },
            closeModal: {},
            contractNo: {
                type: String,
                required: true
            },
            modalTitle: {
                type: String,
                default: "已激活案件列表"
            },

        },
        data() {
            return {
                ModalOpen: this.isModalOpen,
                formValidate: [
                    {
                        termNo: "", // 合同名称
                        totalPenalty: "", // 合同版本号
                        receivedAmt: "",
                        realExemptionAmt: "",
                        startDate: '',
                        endDate: '',
                    }
                ],
                columns1: [
                    {
                        title: '期数',
                        key: 'termNo'
                    },
                    {
                        title: '罚息总计',
                        key: 'totalPenalty'
                    },
                    {
                        title: '已收金额',
                        key: 'receivedAmt'
                    },
                    {
                        title: '已豁免金额',
                        key: 'realExemptionAmt'
                    },
                    {
                        title: '开始结算日期',
                        key: 'startDate'
                    },
                    {
                        title: '结束结算日期',
                        key: 'endDate'
                    }
                ],
            };
        },
        watch: {
            isModalOpen: function (newVal) {
                if (newVal) {
                    this.ModalOpen = newVal;
                    this.loading = true;
                    this.interestByContract();
                }
            }
        },
        created() {

        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
            },
            interestByContract() {
                interestByContract(this.contractNo).then(res => {
                    if (res.code === '0000') {
                        this.formValidate = res.data
                        console.log(this.formValidate,"this.formValidate")
                    }
                })

            },
            cancel() {
                this.$emit("closeModalRent")
            },

        }
    };
</script>
<style scoped lang="less">
    .vertical-center-modal {
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal {
            top: 0;
        }
    }

    .ActivatedCase {
        .new-apply-table {
            padding-top: 18px;
        }

        .table-page {
            padding-top: 16px;
        }
    }

    .text-center {
        text-align: center;
    }
</style>
